<template>
    <div class="banner">
        <div><h1>Banner</h1></div>
        <p>this is the website banner</p>
        <a><button>交个朋友吧</button></a>
    </div>
</template>
<script>
export default {
    name:'banner',
}
</script>
<style scoped>
    .banner{
        /* line-height: 1rem; */
        position: relative;
        z-index: -10;
        box-sizing: border-box;
        width: 100%;
        height: 300px;
        background-color: #f8f5f6;
        text-align: center;
        padding: 80px 50px 80px 50px;
    }
    .banner div{
        text-align: center;
 
    }
   
@font-face{
    font-family: W02;
    src: url("@/assets/font/TsangerYuYangT_W02_W02.ttf");
}
    h1{
        
        justify-content: center;
        margin: 0 auto;
        font-family: W02;
        font-weight: 20px;
       

    }
    a{
        display: block;
    }
    .banner p{
        
        font-family: W02;
        margin: 2px;
    }
    button{
        font-size: 15px;
        width: 150px;
        height: 50px;
        color:white;
        background-color: rgb(255, 147, 147);
        border-radius: 50px;
        border:none;
        font-family:W02;
        margin: 2px;
    }
    @media screen and (max-width:768px) {
        .banner{
             height: 250px;
             padding: 60px 50px 50px 50px;
        }
       
    }
    
    
</style>